<template>
  <div>
    <el-form @keyup.enter.native="getData()" :inline="true">
      <el-form-item>
        <el-input v-model="params.load_name" placeholder="名称查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :stripe="false" :columns="tableColumns" :data="tableData">
      <template v-slot:reportUrls="scope">
        <ul class="list-unstyled">
          <li
            v-for="(report, index) in scope.row.reportUrls"
            class="text-truncate"
            :title="report.name"
            :key="index"
          >
            <a :href="report.url" target="_blank" download="download">{{ report.name }}</a>
          </li>
        </ul>
      </template>
      <template v-slot:entity="scope">
        <div class="text-truncate" :title="scope.row.load_entity">{{ scope.row.load_entity }}</div>
      </template>

      <template v-slot:indLabel="scope">
        <div :title="scope.row.ind_policy">{{ scope.row.indLabel }}</div>
      </template>

      <template v-slot:policyUrls="scope">
        <ul class="list-unstyled">
          <li v-for="(policy, index) in scope.row.policyUrls" :key="index">
            <a
              :href="policy.policy_url"
              :title="policy.policy_name"
              target="_blank"
              download="download"
            >
              <div class="text-truncate">{{ policy.policy_name }}</div>
            </a>
          </li>
        </ul>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <goods-view-dialog
      :visible.sync="viewFormVisible"
      :goods-data="viewFormData"
    ></goods-view-dialog>

    <goods-policy-dialog
      :visible.sync="policyVisible"
      :form-data="policyData"
      @success="getData(params.index)"
    ></goods-policy-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getGoodsQueryAddress } from '@/gov/store/modules/creditGoods'
import { getPolicyFilterAddress, dataAdapter } from '@/credit/views/province/goods/goodsMixins'
import { substr } from '@/common/filters/common'

import GoodsViewDialog from '@/credit/views/province/goods/GoodsViewDialog'
import GoodsPolicyDialog from '@/credit/views/province/goods/GoodsPolicyDialog'

export default {
  components: {
    GoodsViewDialog,
    GoodsPolicyDialog,
  },
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 15,
        load_name: '',
        'is_approval.eq': 1,
        'is_industrial_package.eq': 1,
        'orWhere.supply_address_code.like': [],
        subKey: 'industrial_package_policy.industrial_package_id',
      },
      loading: false,
      tableData: [],
      tableCount: 0,
      tableColumns: [
        { attrs: { label: '产品名', prop: 'load_name' } },
        { attrs: { label: '支持产业', prop: 'supplyProduct' } },
        { attrs: { label: '适用区域', prop: 'supply_address_code_name' } },
        { attrs: { label: '资金总量(万元)', prop: 'funds_total' } },
        { attrs: { label: '适用主体', prop: 'load_entity', minWidth: 130 } },
        { attrs: { label: '担保额度(万元)', prop: 'load_amount' } },
        { attrs: { label: '担保年限(年)', prop: 'loan_term' } },
        { attrs: { label: '担保费率', prop: 'gua_rate' } },
        { attrs: { label: '银行利率', prop: 'bank_rate' } },
        { attrs: { label: '产品模式', prop: 'product_model' } },
        { attrs: { label: '业务模式', prop: 'guaType' } },
        { attrs: { label: '政策报告', prop: 'ind_repor_url' }, slot: 'reportUrls' },
        {
          attrs: { label: '操作', align: 'center', minWidth: 80 },
          operations: [
            { content: '编辑政策报告', icon: 'fa fa-file-o', event: this.handleEditPolicy },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],

      viewFormVisible: false,
      viewFormData: {},

      policyVisible: false,
      policyData: {},
    }
  },
  computed: {
    ...mapGetters(['user', 'enumCategory']),
    policyFilterAddress() {
      return getPolicyFilterAddress(this.user.queryAddressCode)
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index
      await this.$store.dispatch('getEnumCategory')

      this.params['orWhere.supply_address_code.like'] = getGoodsQueryAddress(
        this.user.queryAddressCode
      )
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, 'industrial_package', this.params)
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
    },
    dataAdapter(item) {
      item.indLabel = substr(item.ind_policy, 15)
      item.scaleLabel = `${item.scale || ''}(${item.uscale || ''})`
      return dataAdapter(item, this.enumCategory, this.policyFilterAddress)
    },
    handleView(row = {}) {
      this.viewFormData = row
      this.viewFormVisible = true
    },
    handleEditPolicy(row = {}) {
      this.policyData = { ...row }
      this.policyVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
